<template>
  <div></div>
  <n-space vertical>
    <n-layout
      position="absolute"
      style="width: 100vw"
      :native-scrollbar="false"
    >
      <n-layout
        :native-scrollbar="false"
        class="result"
        :content-style="paddingStyle"
      >
        <div class="result-page">
          <n-result
            v-if="!showResult"
            status="success"
            :title="closingWord ? closingWord : '成功'"
            description="您已成功提交问卷"
          >
            <template #footer>
              <n-button @click="$router.push('/login')" type="primary" ghost
                >我也想用鲸语问卷</n-button
              >
            </template>
          </n-result>
          <div v-else>
            <question-analysis :id="id"></question-analysis>
          </div>
        </div>
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import QuestionAnalysis from './components/QuestionAnalysis.vue';
// 响应式 padding
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  code: {
    type: String,
    required: true,
  },
});

//解密id
import { Base64 } from 'js-base64';
const id: number = Number(
  Base64.decode(Base64.decode(Base64.decode(props.id)))
);
import { ref } from 'vue';
import { Ques } from '@api/question';
const showResult = ref(true);
const closingWord = ref('我是用来测试的');
onMounted(() => {
  Ques.getResult({ id: id }).then((res: any) => {
    console.log('我在获取结果页的数据');
    console.log(res);

    if (res.data.status == 200) {
      showResult.value = res.data.data.showResult;
      closingWord.value = res.data.data.closingWord;
    } else if (res.data.status == 400) {
    } else {
      window.$message.error('出错了，请联系管理员');
    }
  });
});

const paddingStyle = computed(() => {
  return window.innerWidth > 1080
    ? 'padding: 14vh 18vw 10vh 18vw'
    : window.innerWidth > 650
    ? 'padding: 14vh 7vw 10vh 7vw'
    : '';
});
</script>

<style scoped lang="scss">
.result {
  min-height: 100vh;
  background: url('@images/bg-2.png');
  background-position: 38% 10%; /*这个是按从左往右，从上往下的百分比位置进行调整*/
  &-page {
    background-color: #fff;
    padding: 5vh 5vw 3vh 5vw;
    min-height: 50vh;
  }
}
</style>
